<template>
  <view>
    <view class="cart-box" v-if="cartList.length">
    <!-- 收获地址 -->
      <view class="address-box" @click="gotoAddress">
        <my-address></my-address>
      </view>
      <view class="cart-txt">
        <uni-icons type="shop" size="18"></uni-icons>
        <text>购物车</text>
      </view>
      
        <view class="cart-item" v-for="(item,index) in cartList" :key="index">
          <!-- <my-goods :goods="item"></my-goods> -->
          <uni-swipe-action-item
              class="uni-swipe-action-item"
              :right-options="options2"
              :show="isOpened"
              :auto-close="false"
              @click="bindClick(item.id)"
          >
          	<view class="content-box">
              <label>
                <radio :checked="item.state === 2? false : true" color="#bc0102" @click="radioClick(item.id)"/>
              </label>
              <view class="cart-item-pic">
                <image :src="item.logo" mode=""></image>
              </view>
              <view class="cart-item-txt">
                <text>{{item.name}}</text>
                 <view class="cart-item-txt-bom">
                   <text>￥{{item.price}}</text>
                   <uni-number-box :min="1" :value="item.count" @change="(value) => numChangeHandler(value,item.id)"/>
                 </view>
              </view>
            </view>
          </uni-swipe-action-item>
        </view>
        <view class="settle">
          <my-settle :priceSum="sumprice" :sumNum="numSun"></my-settle>
        </view>
    </view>
    <view class="empty-cart" v-else>
      <uni-icons type="cart-filled" size="50"></uni-icons>
      <text>空空如也</text>
    </view>
  </view>
</template>

<script>
  import { useCartStore } from '../../store/store';
  const cartStore = useCartStore()
  export default {
    data() {
      return {
        cartList: [],
        moaddress: [],
        sumprice: +cartStore.priceSum,
        numSun: +cartStore.statesSum,
        options2: [
        	{
        		text: '删除',
        		style: {
        			backgroundColor: '#F56C6C'
        		}
        	}
        ],
      };
    },
    methods: {
      // 选中状态
      radioClick (id) {
        cartStore.radioChange(id)
      },
      // 商品数量
      numChangeHandler(val,id) {
        cartStore.changeNum(id,val)
        // console.log(val,id);
      },
      // 删除商品
      bindClick(id) {
        cartStore.delCart(id)
      }
    },
    watch: {
      'cartStore.statesSum' (){
        cartStore.setBage()
      }
    },
    onLoad(){
      this.cartList = cartStore.cart
    },
    onShow() {
      cartStore.setBage()
    },
    onPullDownRefresh() {
      this.cartList = cartStore.cart
      cartStore.setBage()
      setTimeout(() => {
        uni.stopPullDownRefresh()
      },1000)
    }
  }
</script>

<style lang="scss">
  .settle {
    position: fixed;
    bottom: 0;
    left: 0;
  }
.cart-box{
  // 标题
  position: relative;
  .cart-txt{
    display: flex;
    align-items: center;
    padding-left: 5px;
    height: 40px;
    border-bottom: 1px solid #efefef;
    // width: 100%;
    text{
      font-size: 14px;
      margin-left: 5px;
    }
  }
  .cart-item{
    display: flex;
    padding: 5px 0 60px 5px;
    border-bottom: 1px solid #efefef;
    checkbox {
      border-radius: 50%;
    }
    .cart-item-pic {
      // width: 60px;
      // height: 60px;
      image{
        width: 130px;
        height: 130px;
      }
    }
    .cart-item-txt {
      height: 120px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text {
        font-size: 14px;
      }
      .cart-item-txt-bom {
        display: flex;
        justify-content: space-between;
        text{
          font-size: 16px;
          color: #9c0000;
        }
        .count {
          display: block;
        }
      }
    }
  }
}

.uni-swipe-action-item {
  flex: 1;
}
.content-box {
  display: flex;
    align-items: center;
		position: relative;
	}
	.content-text {
		font-size: 15px;
	}
	.button {
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		padding: 4px 8px;
		border-radius: 4px;
	}
	.button-text {
		font-size: 15px;
	}
  .empty-cart {
    width: 100vw;
    text-align: center;
    margin: 200px auto;
  }
</style>
